<template>
	<view class="bigBox">
		<u-toast ref="uToast"></u-toast>
		<u-navbar @rightClick="rightClick" :autoBack="true" bgColor='#000' height='60'>
			<view class="u-nav-slot left" slot='left'>
				<u-icon name="arrow-left-double" size="50rpx" color='#fff'></u-icon>
				<text>本机号码登录</text>
			</view>
			<view class="u-nav-slot right" slot='right'>
				<text>去注册</text>
				<u-icon name="arrow-right-double" size="28rpx" color='#aaa'></u-icon>
			</view>
		</u-navbar>
		<view class="swiper" style="font-weight: 700;">
			<u-tabs lineWidth='60' lineColor='#2133FF' :activeStyle="{color:'#2133FF'}"
				:inactiveStyle="{color:'#BEC7D1'}" :list="list" :is-scroll="false" :current="Index" @change="change">
			</u-tabs>
		</view>
		<swiper style="width: 750rpx;height: 480rpx;margin-top: 100rpx;" :current="Index" @change="swicperChange">
			<swiper-item>
				<view class="swiper-item">
					<view class="userTitle">
						<u-icon name='account' color="#000" size="24"></u-icon>
						<text class="text">账号</text>
					</view>
					<view class="userInput">
						<u-input style='height: 80rpx;font-size: 60rpx;' placeholder="输入用户名/手机号"></u-input>
					</view>
					<view class="userTitle">
						<u-icon name='lock' color="#000" size="24"></u-icon>
						<text class="text">密码</text>
					</view>
					<view class="userInput">
						<u-input style='height: 80rpx;font-size: 60rpx;' type='password' password
							placeholder="请输入密码"></u-input>
					</view>
					<view class="wjPass">
						<text @click="jump('/pages/index/forgotPass','')">忘记密码？</text>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="userTitle">
						<u-icon name='account' color="#000" size="24"></u-icon>
						<text class="text">手机号</text>
					</view>
					<view class="userInput">
						<u-input style='height: 80rpx;font-size: 60rpx;' placeholder="请输入手机号"></u-input>
					</view>
					<view class="userTitle">
						<u-icon name='integral' color="#000" size="24"></u-icon>
						<text class="text">验证码</text>
					</view>
					<view class="codeInput">
						<u-input style='width: 300rpx;height: 80rpx;font-size: 60rpx;' type='password' password
							placeholder="验证码"></u-input>
						<view class="code">
							<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
							<u-button @tap="getCode" color='#1684FC' style='height: 100rpx;'>{{tips}}</u-button>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="bottom">
			<view class="loginbtn" @click="goHome">
				登 录
			</view>
			<view class="weChat" @click="goWx">
				<u-icon name='weixin-circle-fill' color='#07c160' size='80'></u-icon>
			</view>
			<view class="ys">
				<u-checkbox-group>
					<u-checkbox v-model="checked" active-color="#5677fc" @change='checkedChange'></u-checkbox>注册登录即为同意<text
						class="ysText" @click="jump('/pages/detail/articleDetail?id=','289')">《用户协议》</text> <text class="ysText" @click="jump('/pages/detail/YinSiDetail?id=','6')">《隐私政策》</text>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				list: [{
					name: '账号密码登录'
				}, {
					name: '验证码登录'
				}],
				Index: 0,
				tips: '',
				seconds: 60,
			}
		},
		onLoad() {
			// this.getPhoneNumber()
		},
		methods: {
			goWx(){
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
				    console.log(loginRes);
					uni.getUserInfo({
					      provider: 'weixin',
					      success: function (infoRes) {
					        console.log(infoRes);
					      }
					    });
				  }
				});
			},
			checkedChange(value){
				this.checked=value
				console.log(value)
			},
			goHome() {
				if (this.checked) {
					this.$refs.uToast.show({
						type: 'success',
						icon: true,
						message: "登录成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
						duration:1000,
						complete:()=>{
							uni.reLaunch({
								url: '/pages/home/home/home'
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						message: "请勾选协议",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					})
				}
			
			},
			jump(path,params){
				uni.navigateTo({
					url:path+params
				})
			},
			swicperChange(e) {
				this.Index = e.detail.current;
			},
			change(item) {
				this.Index = item.index
			},
			rightClick() {
				uni.navigateTo({
					url: '/pages/index/register'
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style>
	.bigBox {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.left {
		display: flex;
		align-items: center;
		font-size: 48rpx;
		color: #fff;
	}

	.right {
		font-size: 28rpx;
		color: #aaa;
		display: flex;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}

	.ys {
		margin-top: 70rpx;
		display: flex;
		color: #BEC7D1;
	}

	.ysText {
		color: #6cddd2;
	}

	.swiper {
		margin-top: 200rpx;
		width: 670rpx;
		/* color: rgba(16, 16, 16, 100);
		font-size: 72rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		letter-spacing: 10rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.loginbtn {
		width: 670rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 8rpx;
		background-color: #1684FC;
		color: rgba(255, 255, 255, 100);
		font-size: 36rpx;
		text-align: center;
		font-family: Arial;
		border: 2rpx solid rgba(33, 51, 255, 100);
	}

	.weChat {
		margin-top: 100rpx;
		/* width: 160rpx;
		height: 160rpx;
		background-color:#07c160; */
		border-radius: 10rpx;
	}

	.swiper-item {
		width: 750rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
</style>
<style lang="less">
	.userTitle {
		width: 620rpx;
		display: flex;
		align-items: center;

		text:nth-child(2) {
			margin-left: 20rpx;
			color: #BEC7D1;
			font-size: 28rpx;
		}
	}

	.userInput {
		width: 620rpx;
	}

	.codeInput {
		width: 620rpx;
		margin-bottom: 60rpx;
		display: flex;
		.code{
			width: 300rpx;
			margin-left: 20rpx;
		}
	}

	.wjPass {
		width: 620rpx;
		display: flex;
		justify-content: flex-end;

		text {
			color: #BEC7D1;
		}
	}
</style>
